<template>
  <div class="merak-collapse">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { provide } from "vue";

const actives = defineModel<string[]>({ default: [] });

const onChange = (name: string) => {
  const index = actives.value.findIndex(value => value === name);
  if (index === -1) {
    actives.value.push(name);
  } else {
    actives.value.splice(index, 1);
  }
};

provide("merak-collapse", {
  actives,
  onChange
});
</script>

<style lang="scss">
@import url(./index.scss);
</style>
